<template>
	<div v-loading="loading">
		<el-tree v-model="info" ref="tree" :data="deptList" :props="defaultProps" node-key="deptId" default-expand-all show-checkbox
			@check-change="handleCheckChange"
			highlight-current>
		</el-tree>
	</div>
</template>

<script>
	import {
		listDept,
		getDept,
		delDept,
		addDept,
		updateDept,
		listDeptExcludeChild
	} from "@/api/system/dept";
	import Treeselect from "@riophae/vue-treeselect";
	import "@riophae/vue-treeselect/dist/vue-treeselect.css";

	export default {
		name: "Dept",
		dicts: ['sys_normal_disable'],
		components: {
			Treeselect
		},
		data() {
			return {
				loading: false,
				defaultProps: {
					children: 'children',
					label: 'deptName',
					disabled:'disabled'
				},
				// 表格树数据
				deptList: [],
				info:[],
			};
		},
		created() {
		},
		methods: {
			/** 查询部门列表 */
			getList(e,dis) {
				this.loading = true;
				listDept(this.queryParams).then(response => {
					response.data = response.data.map(v=>{
						let obj = {...v}
						obj.disabled = dis
						return obj
					})
					this.deptList = this.handleTree(response.data, "deptId");
					this.loading = false;
					if(e){
						this.$refs.tree.setCheckedKeys(e)
					}
				});
			},
			/** 转换部门数据结构 */
			normalizer(node) {
				if (node.children && !node.children.length) {
					delete node.children;
				}
				return {
					id: node.deptId,
					label: node.deptName,
					children: node.children
				};
			},
			handleCheckChange(e) {
				console.log(this.$refs.tree.getCheckedKeys())
				let arr = this.$refs.tree.getCheckedKeys()
				this.$emit('setDept',arr)

			},
			showNode(e = [],dis = false){
				this.getList(e,dis);
			}
		}
	};
</script>